<template>
  <div id="internal" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">安全排名</BreadcrumbItem>
				<BreadcrumbItem to="/rank/internal">队内排名</BreadcrumbItem>
			</Breadcrumb>
		</div>
    <TableSearch>
      <Form :label-width="50">
        <Row :gutter="16">
          <Col :md="16">
            <Row>
              <Col :md="8" style="padding:0;">
                <FormItem label="年">
                  <DatePicker v-model="searchForm.year" type="year" @on-change="yearChange" :clearable="false" :editable="false" :options="yearOption" placeholder="请选择"></DatePicker>
                </FormItem>
              </Col>
              <Col :md="8" style="padding:0;">
                <FormItem label="月">
                  <Select v-model="searchForm.month" @on-change="monthChange" placeholder="请选择" clearable>
                    <Option v-for="(v,i) in months" :value="v" :key="`search-month-option-${i}`">{{`${v}月`}}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col :md="8" style="padding:0;">
                <FormItem label="日">
                  <Select v-model="searchForm.date" not-found-text="请先选择月份" placeholder="请选择" clearable>
                    <Option v-for="(v,i) in days" :value="v" :key="`search-day-option-${i}`">{{`${v}日`}}</Option>
                    <ul v-if="!days.length" class="ivu-select-not-found"><li>请先选择月份</li></ul>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col :md="8">
            <FormItem label="车队">
              <Select v-model="searchForm.orgIds" placeholder="请选择">
                <OrgTreeOption></OrgTreeOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="main">
      <div class="table-content">
        <div class="table" style="margin:0;">
          <table>
            <thead>
              <th width="6%">
                排名
                <span class="ivu-table-sort">
                  <i @click="changeSort(0)" :class="{'ivu-icon':true,'ivu-icon-arrow-up-b'  :true,'on':sort===0}"></i>
                  <i @click="changeSort(1)" :class="{'ivu-icon':true,'ivu-icon-arrow-down-b':true,'on':sort===1}"></i>
                </span>
              </th>
              <th width="30%">司机</th>
              <th>综合安全指数</th>
            </thead>
            <tbody>
              <tr v-for="(v,i) in pageData.thisPageElements" :key="`rank-internal-list-${i}`">
                <td><span class="rank">{{v.teamRanking}}</span></td>
                <td style="text-align:left;padding-left:15px;">
                  <Avatar :src="v.headPicUrl" shape="square" icon="person" size="large" />
                  <span style="margin-left:15px;">{{v.driverName}}</span>
                  <span>（{{v.age|isNull}} {{v.sex===0?'男':'女'}} 驾龄:{{v.driveAge|isNull}}年）</span>
                </td>
                <td style="text-align:left;padding-left:15px;">
                  <span class="score">{{v.safetyIndex}}</span>
                  <span class="score-info">
                    （
                      百公里不良驾驶：{{v.bglBadDriveTimes|num}}次
                      百公里不良操作：{{v.bglBadOperationTimes|num}}次
                      情绪指数：{{v.sentimentIndex|num(0)}}分
                      睡眠时长：{{v.sleepDuration|num}}小时
                    ）
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="loader-box">
        <Spin v-if="isLoading">
          <Icon type="load-c" size="18" class="more-spin-icon-load"></Icon>
          <span>加载中...</span>
        </Spin>
        <template v-else>
          <a v-if="pageData.hasNextPage" @click="loadPage(pageNum+1)">点击加载更多 <Icon type="arrow-down-c"></Icon></a>
          <span v-else>没有更多数据了</span>
        </template>
      </div>
    </div>

  </div>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
  import moment from 'moment'

  export default {
    data(){
      return {
        searchForm:{
          year:moment([moment().year()]).toDate(),
          month:moment().month()+1,
          date:moment().subtract(1,'d').date(),
          orgIds:''
        },
        submitForm:{},
        pageNum:1,
        sort:0,
        yearOption:{
          disabledDate:(d) => {
            return moment(d).year() > moment().year();
          }
        }
      };
    },
    computed:{
      ...mapState('base',['userinfo']),
      ...mapState('rank/rankInternal',['pageData','isLoading']),
      months(){
        let isCurYear = moment(this.searchForm.year).year() === moment().year();
        let month = isCurYear ? moment().month() + 1 : 12;
        let monthlist = [];
        for (let i = 1; i <= month; i++){
          monthlist.push(i);
        }
        return monthlist;
      },
      days(){
        if (!this.searchForm.month) return [];
        let m = moment(`${moment(this.searchForm.year).format('YYYY')}-${this.searchForm.month}-01`,'YYYY-M-DD');
        let cur = moment(`${moment().format('YYYY-MM')}-01`);
        let isCurMonth = m.format('YYYY-MM') === cur.format('YYYY-MM');
        let monthDay = isCurMonth ? moment().date() - 1 : m.daysInMonth();
        let daylist = [];
        for (let i = 1; i <= monthDay; i++){
          daylist.push(i);
        }
        return daylist;
      }
    },
    methods:{
      moment,
      ...mapActions('rank/rankInternal',['reload']),
      yearChange(v){
        let i = this.months.findIndex(o => o === this.searchForm.month);
        if (i < 0) {
          this.searchForm.month = null;
        }
        this.monthChange(this.searchForm.month);
      },
      monthChange(v){
        let i = this.days.findIndex(o => o === this.searchForm.day);
        if (i < 0) {
          this.searchForm.day = null;
        }
      },
      changeSort(sort){
        this.sort = sort;
        this.search();
      },
      search(){
        this.submitForm = {
          ...this.searchForm,year:this.searchForm.year.getFullYear(),order:this.sort
        };
        this.pageNum = 1;
        this.reload({pageNum:this.pageNum,...this.submitForm});
      },
      loadPage(i){
        this.pageNum = i;
        let list = this.pageData.thisPageElements || [];
        let last = list[list.length - 1];
        let lastRank = last ? last.teamRanking : null;
        let lastSafetyIndex = last ? last.safetyIndex : null;
        this.reload({pageNum:this.pageNum,lastRank,lastSafetyIndex,...this.submitForm});
      }
    },
    mounted(){
      if(!this.searchForm.orgIds){
        this.userinfo.lowerOrgs.forEach(o => {
          let item = {...o};
          if (item.orgType === 2) {
            this.searchForm.orgIds = item.id;
            return;
          }
        });
      }
      this.search();
    },
    filters:{
      isNull(v){
        return v === null ? '--' : v;
      },
      num(v,fixed=1){
        return v === null ? '--' : v.toFixed(fixed);
      }
    }
  }
</script>

<style lang="less" scoped>
  #internal{
    .mine>td{background-color: #BEDDE6;}
    .rank{font-size: 22px;line-height: 30px;}
    .score{display: inline-block;width: 50px;font-size: 26px;line-height: 30px;font-weight: 400;}
    .score-info{color: #ed3f14;}

    .loader-box{
      height: 30px;line-height: 30px;margin-top: 10px;text-align: center;
      .more-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
      }
      @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
      }
    }
  }
</style>
